<template>
    <div class="container">
        <el-carousel height="180px">
            <el-carousel-item v-for="item in images" :key="item">
                <img class="banner-img" :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
        <!-- search -->
        <div class="search-input">
            <el-input style="width: 40%;" v-model="queryParams.applyName" @keyup.enter="getList(queryParams)"
                placeholder="请输入应用名称" class="search-input" />
        </div>
        <!-- 基础应用 -->
        <div class="public-title">
            <div class="text">基础应用</div>
            <div class="arrow" @click="fresh">
                <el-icon :class="{ 'refresh': refreshed }">
                    <Refresh />
                </el-icon>
                换一批
            </div>
        </div>
        <el-row class="base">
            <el-col :span="3" class="base-img">
                <img :src="ad1" alt="">
            </el-col>
            <el-col :span="18" class="base-content">
                <div class="base-item">
                    <div class="base-item-content">
                        <div class="base-item-content-item" :class="`item_` + (index % 2)"
                            v-for="(app, index) in dataSource" @click="goApp(app.id)" :key="index">
                            <div class="base-item-content-item-icon">
                                <img :src="app.applyLogo" alt="">
                            </div>
                            <div class="base-item-content-item-info">
                                <div class="base-item-content-item-info-title">{{ app.applyName }}</div>
                                <div class="base-item-content-item-info-desc">{{ app.applyDescription }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="3" class="base-img">
                <img :src="ad2" alt="">
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="buy" lang="ts">
import b1 from '@/assets/images/b1.png'
import b2 from '@/assets/images/b2.png'
import ad1 from '@/assets/images/ad1.png'
import ad2 from '@/assets/images/ad2.png'
import app_base from '@/assets/images/app_base.svg'
import app_three from '@/assets/images/app_three.svg'
import apply from '@/api/system/apply';
import { onMounted } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const images = [b1, b2]
const refreshed = ref(false)
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    applyType: 2,
    applyName: ''
})
const getList = async (params) => {
    const res = await apply.list(params)
    dataSource.value = res.rows
}
const dataSource = ref([])
const goApp = (id: string) => {
    window.open('/application/detail?id=' + id, '_blank')
}
const fresh = () => {
    refreshed.value = !refreshed.value
    setTimeout(() => {
        refreshed.value = !refreshed.value
    }, 1500);
    if (dataSource.value.length === queryParams.pageSize) {
        queryParams.pageNum++
    } else {
        queryParams.pageNum = 1
    }
    getList(queryParams)
}
onMounted(() => {
    getList(queryParams)
})
</script>

<style lang="scss" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

.banner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.public-title {
    font-size: 16px;
    color: #303133;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .arrow {
        color: #409eff;
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;

        .refresh {
            // 旋转动画只运行一次
            animation: rotate 1s 1;
        }
    }
}


.base {
    display: flex;
    justify-content: space-between;
    min-height: 600px;

    .base-img {
        width: 100%;
        height: 600px;

        img {
            width: 100%;
            height: 600px;
            object-fit: cover;
        }
    }

    .base-content {
        .base-item {
            .base-item-title {
                font-size: 16px;
                color: #303133;
                margin-bottom: 10px;
            }

            .base-item-content {
                display: grid;
                grid-template-columns: repeat(3, 1fr);

                margin-left: 10px;

                // .item_0 {
                //     margin-right: 40px;
                // }

                .base-item-content-item {
                    width: 248px;
                    margin-bottom: 20px;
                    height: 80px;
                    border: 1px solid #ebeef5;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding: 4px;
                    cursor: pointer;

                    .base-item-content-item-icon {
                        width: 60px;
                        height: 60px;
                        border-radius: 8px;
                        // overflow: hidden;

                        img {
                            width: 60px;
                            height: 60px;
                            border-radius: 16px;
                            overflow: hidden;
                        }
                    }

                    .base-item-content-item-info {
                        margin-left: 10px;

                        .base-item-content-item-info-title {
                            font-size: 16px;
                            color: #303133;
                        }

                        .base-item-content-item-info-desc {
                            font-size: 14px;
                            color: #606266;
                            // 2行超出显示省略号
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
}

.search-input {
    margin-top: 20px;
    text-align: center;
}</style>